<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="myform">
        <input type="text" id="username"/>
        <input type="reset"/>
        <input type="submit" value="提交"/>
    </form>
    <script>
        /*
            onfocus: 获得焦点
            onblur: 失去焦点
            onchange: 当元素从获得焦点到失去焦点的时候里面的内容变了，就会触发

            下面这两个只能用在form上，不能用在input上面。
            onsubmit: 提交按钮被点击的时候，也就是提交的时候
            onreset: 重置按钮被点击的时候，也就是重置的时候
        */ 
       let username = document.querySelector('#username')
       let myform = document.querySelector('#myform')

       username.onfocus = ()=>{
        console.log('我获得焦点了');
       }
       username.onblur = ()=>{
        console.log('我失去焦点了');
       }
       username.onchange = ()=>{
        console.log('变了');
       }

       myform.onsubmit = ()=>{
        console.log('你提交了');
       }
       myform.onreset = ()=>{
        console.log('已重置');
       }
    </script>
</body>
</html>